<template>
    <div class="appointment-details">
        <!-- <div class="status-bar">
            <div class="time">9:41</div>
            <div class="status-icons">
                <div class="signal"></div>
                <div class="wifi"></div>
                <div class="battery"></div>
            </div>
        </div> -->

        <div class="nav-bar">
            <div class="nav-left">
                <i class="arrow-left" @click="onBack">←</i>
            </div>  
            <div class="nav-title">选择就诊人</div>
            <div class="nav-right">
                <i class="dots">⋯</i>
                <i class="search">⊙</i>
            </div>
        </div>

        <!-- 提示文字 -->
   

        <div class="content">
            <!-- 患者信息展示 -->
            <div class="patient-info-section">
                <div class="section-title">就诊人信息</div>
                <div class="info-item">
                    <span class="label">姓名</span>
                    <span class="value">{{ patientInfo.name }}</span>
                </div>
                <div class="info-item">
                    <span class="label">关系</span>
                    <span class="value">{{ patientInfo.relationship }}</span>
                </div>
                <div class="info-item">
                    <span class="label">身份证号</span>
                    <span class="value">{{ maskIdCard(patientInfo.idCardNum) }}</span>
                </div>
            </div>

            <!-- 科室信息展示 -->
            <div class="department-info-section">
                <div class="section-title">科室信息</div>
                <div class="info-item">
                    <span class="label">主科室</span>
                    <span class="value">{{ departmentInfo.mainDepartmentName }}</span>
                </div>
                <div class="info-item">
                    <span class="label">子科室</span>
                    <span class="value">{{ departmentInfo.departmentName }}</span>
                </div>
            </div>

            <!-- 医生信息 -->
            <div class="doctor-section">
                <div class="doctor-avatar"></div>
                <div class="doctor-info">
                    <input v-model="appointmentData.doctorName" class="input-field doctor-name-input"
                        placeholder="请输入医生姓名" required />
                    <input v-model="appointmentData.attendingName" class="input-field doctor-title-input"
                        placeholder="请输入医生职称" />
                </div>
            </div>

            <!-- 医院信息 -->
            <div class="hospital-section">
                <div class="info-item">
                    <span class="label">就诊医院 <span class="required">*</span></span>
                    <input v-model="appointmentData.attending" class="input-field" placeholder="请输入就诊医院" required />
                </div>
                <div class="info-item">
                    <span class="label">医院地址 <span class="required">*</span></span>
                    <div class="address-selector" @click="showAddressPicker">
                        <input 
                            v-model="appointmentData.doctorAddress" 
                            class="input-field address-input" 
                            placeholder="点击选择医院地址" 
                            readonly 
                            required 
                        />
                        <i class="location-icon">📍</i>
                    </div>
                </div>
            </div>

            <!-- 预约时间信息 -->
            <div class="appointment-section">
                <div class="info-item">
                    <span class="label">门诊时间 <span class="required">*</span></span>
                    <input v-model="appointmentData.outpatientTime" class="input-field" type="datetime-local" required />
                </div>
                <div class="info-item">
                    <span class="label">候诊时间 <span class="required">*</span></span>
                    <input v-model="appointmentData.waitingTime" class="input-field" type="time" required />
                </div>
                <div class="info-item">
                    <span class="label">挂号费</span>
                    <input v-model="appointmentData.cost" class="input-field" type="number" placeholder="请输入挂号费" min="0" />
                </div>
                <div class="info-item">
                    <span class="label">预约时间 <span class="required">*</span></span>
                    <input v-model="appointmentData.appointmentTime" class="input-field" type="datetime-local" required />
                </div>
            </div>

            <!-- 备注信息 -->
            <div class="notes-section">
                <div class="info-item">
                    <span class="label">备注</span>
                    <textarea v-model="appointmentData.desc" class="textarea-field" placeholder="请输入备注信息（可选）" rows="3"></textarea>
                </div>
            </div>
        </div>

        <!-- 地址选择弹窗 -->
        <van-popup v-model:show="showAddressPopup" position="bottom" :style="{ height: '70%' }">
            <div class="address-picker-popup">
                <div class="popup-header">
                    <span class="popup-title">选择医院地址</span>
                    <van-icon name="cross" @click="showAddressPopup = false" />
                </div>
                
                <!-- 搜索框 -->
                <div class="search-section">
                    <van-search 
                        v-model="searchKeyword" 
                        placeholder="搜索医院或地址" 
                        @search="searchAddress"
                        @input="onSearchInput"
                    />
                </div>

                <!-- 地图区域 -->
                <div class="map-section">
                    <BaiduMapComponent :doctorAddress="selectedAddress" />
                </div>

                <!-- 地址列表 -->
                <div class="address-list">
                    <div class="list-title">
                        附近医院
                        <span v-if="isLoading" class="loading-indicator">搜索中...</span>
                    </div>
                    
                    <!-- 加载状态 -->
                    <div v-if="isLoading" class="loading-container">
                        <div class="loading-spinner"></div>
                        <div class="loading-text">正在搜索医院...</div>
                    </div>
                    
                    <!-- 地址列表 -->
                    <div v-else>
                        <div 
                            v-for="(address, index) in nearbyHospitals" 
                            :key="index"
                            class="address-item"
                            :class="{ 'placeholder-item': address.isPlaceholder }"
                            @click="selectAddress(address)"
                        >
                            <div class="address-name">{{ address.name }}</div>
                            <div class="address-detail">{{ address.address }}</div>
                            <div v-if="address.distance" class="address-distance">{{ address.distance }}</div>
                        </div>
                    </div>
                </div>

                <!-- 确认按钮 -->
                <div class="popup-footer">
                    <button class="confirm-address-btn" @click="confirmAddress">确认选择</button>
                </div>
            </div>
        </van-popup>

        <div class="footer">
            <div class="instruction">
                挂号前仔细阅读<router-link to="/outpatient/appointment-notice" class="link">《挂号须知》</router-link>
            </div>
            <button class="confirm-btn" @click="appAdding">确认预约</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import BaiduMapComponent from '../../components/BaiduMapComponent.vue'

const router = useRouter()
const route = useRoute()

// 患者信息
const patientInfo = ref({
    patientId: '',
    name: '',
    relationship: '',
    idCardType: '',
    idCardNum: '',
    medicalCard: '',
    phone: '',
    address: ''
})

// 科室信息
const departmentInfo = ref({
    departmentId: '',
    departmentName: '',
    mainDepartmentId: '',
    mainDepartmentName: ''
})

// 地址选择相关
interface HospitalInfo {
    name: string
    address: string
    distance: string
    lat: number
    lng: number
    isPlaceholder?: boolean
}

const showAddressPopup = ref(false)
const searchKeyword = ref('')
const selectedAddress = ref('湖南省长沙市湘南医院')
const isLoading = ref(false)
const searchTimeout = ref<NodeJS.Timeout | null>(null)

// 原始医院数据（用于恢复）
const originalHospitals: HospitalInfo[] = [
    {
        name: '湘南医院',
        address: '湖南省长沙市湘南医院',
        distance: '0m',
        lat: 28.2278,
        lng: 112.9388
    },
    {
        name: '长沙市第一人民医院',
        address: '湖南省长沙市开福区营盘路311号',
        distance: '1.2km',
        lat: 28.2356,
        lng: 112.9456
    },
    {
        name: '中南大学湘雅医院',
        address: '湖南省长沙市开福区湘雅路87号',
        distance: '2.5km',
        lat: 28.2189,
        lng: 112.9523
    },
    {
        name: '湖南省人民医院',
        address: '湖南省长沙市芙蓉区解放西路61号',
        distance: '3.8km',
        lat: 28.2012,
        lng: 112.9689
    },
    {
        name: '长沙市妇幼保健院',
        address: '湖南省长沙市雨花区韶山南路161号',
        distance: '4.2km',
        lat: 28.1890,
        lng: 112.9756
    },
    {
        name: '湖南省肿瘤医院',
        address: '湖南省长沙市岳麓区桐梓坡路283号',
        distance: '5.1km',
        lat: 28.1767,
        lng: 112.9823
    }
]

// 当前显示的医院列表
const nearbyHospitals = ref<HospitalInfo[]>([...originalHospitals])

// 预约信息
interface AppointmentDetails {
    appointmentId: number
    attending: string
    doctorAddress: string
    department: string
    attendingName: string
    doctorName: string
    registTypeId: number
    outpatientTime: string
    waitingTime: string
    cost: number
    appointmentTime: string
    medicalState: boolean
    reason: string
    cancelTime: string
    desc: string
    patientId: number
    departmentId: number
}

const appointmentData = ref<AppointmentDetails>({
    appointmentId: 0,
    attending: '',
    doctorAddress: '',
    department: '',
    attendingName: '',
    doctorName: '',
    registTypeId: 1,
    outpatientTime: '',
    waitingTime: '',
    cost: 0,
    appointmentTime: '',
    medicalState: true,
    reason: '',
    cancelTime: '',
    desc: '',
    patientId: 0,
    departmentId: 0
})

// 返回上一页
const onBack = () => {
    router.back()
}

// 显示地址选择器
const showAddressPicker = () => {
    showAddressPopup.value = true
}

// 防抖搜索函数
const debounceSearch = (keyword: string, delay: number = 500) => {
    if (searchTimeout.value) {
        clearTimeout(searchTimeout.value)
    }
    
    searchTimeout.value = setTimeout(() => {
        performSearch(keyword)
    }, delay)
}

// 执行搜索
const performSearch = async (keyword: string) => {
    if (!keyword.trim()) {
        // 恢复原始列表
        nearbyHospitals.value = [...originalHospitals]
        return
    }

    isLoading.value = true
    
    try {
        // 1. 先进行本地搜索
        const localResults = originalHospitals.filter(hospital => 
            hospital.name.toLowerCase().includes(keyword.toLowerCase()) || 
            hospital.address.toLowerCase().includes(keyword.toLowerCase())
        )

        // 2. 如果本地搜索结果较少，进行精准查询
        if (localResults.length < 3) {
            const preciseResults = await searchPreciseAddress(keyword)
            nearbyHospitals.value = [...localResults, ...preciseResults]
        } else {
            nearbyHospitals.value = localResults
        }

        // 3. 如果没有结果，显示提示
        if (nearbyHospitals.value.length === 0) {
            nearbyHospitals.value = [{
                name: '未找到相关医院',
                address: '请尝试其他关键词',
                distance: '',
                lat: 0,
                lng: 0,
                isPlaceholder: true
            }]
        }
    } catch (error) {
        console.error('搜索失败:', error)
        ElMessage.error('搜索失败，请重试')
        nearbyHospitals.value = [...originalHospitals]
    } finally {
        isLoading.value = false
    }
}

// 精准地址查询（模拟百度地图API）
const searchPreciseAddress = async (keyword: string): Promise<HospitalInfo[]> => {
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 800))
    
    // 模拟精准查询结果
    const preciseResults = [
        {
            name: `${keyword}医院`,
            address: `湖南省长沙市${keyword}区${keyword}路123号`,
            distance: '6.5km',
            lat: 28.1634,
            lng: 112.9890
        },
        {
            name: `${keyword}医疗中心`,
            address: `湖南省长沙市${keyword}区医疗大道456号`,
            distance: '7.2km',
            lat: 28.1501,
            lng: 112.9956
        }
    ]
    
    return preciseResults
}

// 搜索地址（触发搜索）
const searchAddress = (keyword: string) => {
    console.log('搜索地址:', keyword)
    searchKeyword.value = keyword
    debounceSearch(keyword)
}

// 搜索输入处理（实时搜索）
const onSearchInput = (value: string) => {
    searchKeyword.value = value
    debounceSearch(value, 300) // 更短的延迟用于实时搜索
}

// 选择地址
const selectAddress = (address: any) => {
    // 如果是占位符项，不允许选择
    if (address.isPlaceholder) {
        ElMessage.warning('请选择有效的医院地址')
        return
    }
    
    selectedAddress.value = address.address
    console.log('选择地址:', address)
    
    // 更新地图显示
    // 这里可以调用地图API更新位置
}

// 确认地址选择
const confirmAddress = () => {
    appointmentData.value.doctorAddress = selectedAddress.value
    showAddressPopup.value = false
    ElMessage.success('地址选择成功')
}

// 清理搜索定时器
const clearSearchTimeout = () => {
    if (searchTimeout.value) {
        clearTimeout(searchTimeout.value)
        searchTimeout.value = null
    }
}

// 页面卸载时清理
onMounted(() => {
    initData()
})

// 组件卸载时清理定时器
onUnmounted(() => {
    clearSearchTimeout()
})

// 身份证号脱敏处理
const maskIdCard = (idCard: string) => {
    if (!idCard) return ''
    if (idCard.length < 8) return idCard
    return idCard.substring(0, 3) + '*'.repeat(idCard.length - 6) + idCard.substring(idCard.length - 3)
}

// 初始化数据
const initData = () => {
    // 获取路由参数中的患者信息
    patientInfo.value = {
        patientId: route.query.patientId as string || '',
        name: route.query.name as string || '',
        relationship: route.query.relationship as string || '',
        idCardType: route.query.idCardType as string || '',
        idCardNum: route.query.idCardNum as string || '',
        medicalCard: route.query.medicalCard as string || '',
        phone: route.query.phone as string || '',
        address: route.query.address as string || ''
    }

    // 获取路由参数中的科室信息
    departmentInfo.value = {
        departmentId: route.query.departmentId as string || '',
        departmentName: route.query.departmentName as string || '',
        mainDepartmentId: route.query.mainDepartmentId as string || '',
        mainDepartmentName: route.query.mainDepartmentName as string || ''
    }

    // 设置预约信息中的患者ID和科室ID
    appointmentData.value.patientId = parseInt(patientInfo.value.patientId) || 0
    appointmentData.value.departmentId = parseInt(departmentInfo.value.departmentId) || 0
    appointmentData.value.department = departmentInfo.value.departmentName

    // 反填医生信息
    if (route.query.doctorName) {
        appointmentData.value.doctorName = route.query.doctorName as string
    }
    if (route.query.title) {
        appointmentData.value.attendingName = route.query.title as string
    }
    // 反填挂号费（从AppoinDescing页面传递过来）
    if (route.query.consultationFee) {
        appointmentData.value.cost = parseFloat(route.query.consultationFee as string) || 0
    }

    // 反填医院信息（设置默认值）
    if (!appointmentData.value.attending) {
        appointmentData.value.attending = '湘南医院'
    }
    if (!appointmentData.value.doctorAddress) {
        appointmentData.value.doctorAddress = '湖南省长沙市湘南医院'
    }

    // 注意：门诊时间及以下字段不进行反填，由用户手动输入
    // 包括：outpatientTime, waitingTime, appointmentTime, desc
    // 挂号费(cost)会从AppoinDescing页面反填

    console.log('患者信息:', patientInfo.value)
    console.log('科室信息:', departmentInfo.value)
    console.log('预约数据:', appointmentData.value)
    console.log('医生信息反填:', {
        doctorName: appointmentData.value.doctorName,
        attendingName: appointmentData.value.attendingName,
        cost: appointmentData.value.cost
    })
}

// 提交预约信息
const appAdding = async () => {
    // 验证必填字段
    if (!appointmentData.value.doctorName || appointmentData.value.doctorName.trim() === '') {
        ElMessage.error('请输入医生姓名')
        return
    }
    if (!appointmentData.value.attending || appointmentData.value.attending.trim() === '') {
        ElMessage.error('请输入就诊医院')
        return
    }
    if (!appointmentData.value.doctorAddress || appointmentData.value.doctorAddress.trim() === '') {
        ElMessage.error('请输入医院地址')
        return
    }
    if (!appointmentData.value.outpatientTime) {
        ElMessage.error('请选择门诊时间')
        return
    }
    if (!appointmentData.value.appointmentTime) {
        ElMessage.error('请选择预约时间')
        return
    }
    if (!appointmentData.value.waitingTime) {
        ElMessage.error('请选择候诊时间')
        return
    }

    try {
        // 格式化时间字段
        const formattedData = {
            ...appointmentData.value,
            // 确保时间字段格式正确
            outpatientTime: appointmentData.value.outpatientTime ? new Date(appointmentData.value.outpatientTime).toISOString() : '',
            appointmentTime: appointmentData.value.appointmentTime ? new Date(appointmentData.value.appointmentTime).toISOString() : '',
            // waitingTime 如果是时间格式，需要转换为完整的日期时间
            waitingTime: appointmentData.value.waitingTime ? 
                (appointmentData.value.waitingTime.includes('T') ? 
                    new Date(appointmentData.value.waitingTime).toISOString() : 
                    new Date(`2024-01-01T${appointmentData.value.waitingTime}`).toISOString()) : 
                new Date().toISOString(),
            // 添加 cancelTime 字段
            cancelTime: appointmentData.value.cancelTime || new Date().toISOString(),
            // 确保数值字段为数字类型
            cost: Number(appointmentData.value.cost) || 0,
            registTypeId: Number(appointmentData.value.registTypeId) || 1,
            patientId: Number(appointmentData.value.patientId) || 0,
            departmentId: Number(appointmentData.value.departmentId) || 0,
            appointmentId: Number(appointmentData.value.appointmentId) || 0
        }

        console.log('发送的预约数据:', formattedData)

        const response = await axios.post('http://localhost:5250/api/Appoint/AddAppoint', {
            add: formattedData, // 添加 add 字段
            appointments: formattedData
        })
        
        console.log('API响应:', response.data)
        
        if (response.data.code === 300) {
            ElMessage.success('预约成功')
            // 跳转到预约记录页面
            router.push('/appointment-records')
        } else {
            ElMessage.error(response.data.message || '预约失败')
        }
    } catch (error) {
        console.error('预约失败:', error)
        //console.error('错误详情:', error.response?.data)
        
        // 检查是否是网络错误
        // if (error.code === 'NETWORK_ERROR' || !error.response) {
        //     ElMessage.error('网络连接失败，请检查网络')
        //     return
        // }
        
        // // 检查响应状态码
        // if (error.response?.status === 400) {
        //     ElMessage.error('请求参数错误，请检查填写的信息')
        // } else if (error.response?.status === 500) {
        //     ElMessage.error('服务器内部错误，请稍后重试')
        // } else {
        //     ElMessage.error('预约失败，请稍后重试')
        // }
    }
}

// 页面加载时初始化数据
onMounted(() => {
    initData()
})
</script>

<style scoped>
.appointment-details {
    min-height: 100vh;
    background-color: #f5f5f5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background-color: #000;
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.status-icons {
    display: flex;
    gap: 4px;
}

.signal,
.wifi,
.battery {
    width: 16px;
    height: 12px;
    background-color: white;
    border-radius: 2px;
}

.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background-color: white;
    border-bottom: 1px solid #f0f0f0;
}

.nav-left,
.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.arrow-left {
    font-size: 18px;
    color: #666;
    cursor: pointer;
    transition: color 0.2s;
    font-weight: 600;
}

.arrow-left:hover {
    color: #333;
}

.dots,
.search {
    font-size: 16px;
    color: #666;
    cursor: pointer;
    transition: color 0.2s;
}

.dots:hover,
.search:hover {
    color: #333;
}

.instruction-text {
    padding: 16px 20px;
    font-size: 16px;
    color: #666;
    background-color: white;
    border-bottom: 1px solid #f0f0f0;
}

.content {
    padding: 16px;
    background-color: white;
    margin: 8px;
    border-radius: 8px;
    margin-bottom: 100px;
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #1989fa;
}

.patient-info-section,
.department-info-section {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.doctor-section {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.doctor-avatar {
    width: 60px;
    height: 60px;
    background-color: #e3f2fd;
    border-radius: 8px;
    margin-right: 16px;
}

.doctor-info {
    flex: 1;
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 8px 0;
}

.label {
    font-size: 14px;
    color: #666;
    min-width: 80px;
    margin-right: 12px;
}

.required {
    color: #ff4d4f;
    margin-left: 2px;
}

.value {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.hospital-section,
.appointment-section,
.notes-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.notes-section {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 地址选择器样式 */
.address-selector {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.address-input {
    cursor: pointer;
    background-color: #f9f9f9;
}

.address-input:focus {
    background-color: #fff;
}

.location-icon {
    position: absolute;
    right: 12px;
    font-size: 16px;
    color: #1976d2;
    pointer-events: none;
}

/* 地址选择弹窗样式 */
.address-picker-popup {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
}

.popup-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.search-section {
    padding: 16px 20px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #f0f0f0;
}

.map-section {
    height: 200px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #f0f0f0;
}

.address-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.list-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.loading-indicator {
    font-size: 12px;
    color: #1976d2;
    font-weight: normal;
}

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #1976d2;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 12px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    font-size: 14px;
    color: #666;
}

.address-item {
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background-color: #fff;
}

.address-item:hover {
    border-color: #1976d2;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.1);
}

.address-item:last-child {
    margin-bottom: 0;
}

.placeholder-item {
    background-color: #f9f9f9;
    border-color: #ddd;
    cursor: not-allowed;
    opacity: 0.6;
}

.placeholder-item:hover {
    border-color: #ddd;
    box-shadow: none;
}

.address-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.address-detail {
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
}

.address-distance {
    font-size: 12px;
    color: #1976d2;
    font-weight: 500;
}

.popup-footer {
    padding: 16px 20px;
    background-color: #fff;
    border-top: 1px solid #f0f0f0;
}

.confirm-address-btn {
    width: 100%;
    padding: 12px;
    background-color: #1976d2;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.confirm-address-btn:hover {
    background-color: #1565c0;
}

.confirm-address-btn:active {
    background-color: #0d47a1;
}

.input-field {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    transition: border-color 0.3s;
}

.input-field:focus {
    outline: none;
    border-color: #1976d2;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
}

.input-field::placeholder {
    color: #999;
}

.textarea-field {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    transition: border-color 0.3s;
    resize: vertical;
    min-height: 60px;
}

.textarea-field:focus {
    outline: none;
    border-color: #1976d2;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
}

.textarea-field::placeholder {
    color: #999;
}

.doctor-name-input {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    width: 100%;
}

.doctor-title-input {
    font-size: 14px;
    color: #666;
    width: 100%;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    padding: 16px;
    border-top: 1px solid #e0e0e0;
}

.instruction {
    text-align: center;
    font-size: 12px;
    color: #666;
    margin-bottom: 12px;
}

.link {
    color: #1976d2;
    text-decoration: none;
}

.confirm-btn {
    width: 100%;
    height: 48px;
    background-color: #1976d2;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

.confirm-btn:hover {
    background-color: #1565c0;
}

.confirm-btn:active {
    background-color: #0d47a1;
}

@media (max-width: 480px) {
    .content {
        margin: 4px;
        padding: 12px;
    }

    .nav-bar {
        padding: 8px 12px;
    }

    .footer {
        padding: 12px;
    }
}
</style>